@import "variables";

.seed-toolbar-header {
  position: relative;
  display: block;
  .top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: pxTorem(90px);
    padding: 0px pxTorem(20px);
  }
}

seed-toolbar-title {
  width: 100%;
  text-align: center;
  height: pxTorem(90px);
  .seed-toolbar-title {
    max-width: 60%;
    height: pxTorem(90px);
    line-height: pxTorem(90);
    text-align: center;
    @include font-dpr(34px);
    font-weight: 400;
    color: color($h5, c2);
  }
}

seed-toolbar-menu.seed-toolbar-menu {
 /* position: absolute;
  top: 0;
  bottom: 0;
  right: pxTorem(20);
  width: pxTorem(46px);
  height: pxTorem(35px);
  margin: auto;*/
  transition-property: all;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  .seed-icon {
    @include font-dpr(46px)
  }
}

seed-toolbar-nav {
  .seed-toolbar-nav {
    position: absolute;
    z-index: 11;
    overflow: hidden;
    width: 100%;
    height: pxTorem(180px);
    max-height: 0;
    padding: 0 pxTorem(50);
    line-height: pxTorem(90px);
    @include font-dpr(34px);
    @include set-color(c2);
    background: color($h5, c10);
    opacity: .95;
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    &.fold {
      max-height: pxTorem(90px);
    }
    a {
      float: left;
      width: 25%;
      text-align: center;
      &.current {
        @include set-color(c1);
      }
    }
  }
}

seed-content {
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  .seed-scroll-content {
/*    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;*/
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    flex-grow: 2;
    height: 100%;
    &.unfold {
      margin-top: pxTorem(180px);
    }
    &.no-scroll {
      overflow: hidden;
    }
  }
  .seed-scroll-content.no-scroll {
    overflow: hidden;
  }
}

seed-toolbar-roller {
  &.scroll-x {
    .seed-scroll {
      overflow-x: auto;
      white-space: nowrap;
      &::-webkit-scrollbar {
        display: none
      }
    }
  }
  .seed-scroll {
    position: relative;
    top: 0;
    left: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

.no-scroll .seed-scroll-content {
  overflow: hidden;
}

seed-toolbar-backbutton {
  overflow: visible;
  order: 0;
  margin: 0;
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  line-height: 1;
  transform: translateZ(0);
  transition: opacity 1s ease-out 0s;
}

.seed-toolbar-backbtn-warp {
  width: pxTorem(30px);
  height: 100%;
}

.seed-toolbar-backbtn {
  width: pxTorem(21px);
  display: inline-block;
  height: pxTorem(40px);
  background: url(#{$icons-path}/back_btn.png) no-repeat center center/contain;
}

body.unfold .seed-toolbar-nav {
  max-height: pxTorem(180px);
}

seed-toolbar-home {
  height: 100%;
}

.seed-toolbar-home {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .homepage {
    width: pxTorem(120px);
    height: pxTorem(39px);
    display: inline-block;
    background: url(#{$icons-path}/icon.png) no-repeat center center/contain;
  }
  .index {
    padding-left: pxTorem(10px);
    @include font-dpr(30px);
    @include set-color(c12);
    font-style: italic;
    .iso {
      @include font-dpr(40px);
      font-style: initial;
      /*   padding-right: pxTorem(2px);*/
    }
  }
}

//回到顶部按钮
#seed-scroll-top {
  visibility: hidden;
  opacity: 0;
  z-index: 9;
  position: fixed;
  width: pxTorem(108);
  height: pxTorem(108);
  right: pxTorem(20);
  bottom: pxTorem(130);
  transition: all 1S ease-out 0s;
  background: url(#{$icons-path}/scroll_top.png) no-repeat center center/contain;
  &.show {
    visibility: visible;
    opacity: 1;
  }
}

.seed-toolbar-background {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transform: translateZ(0);
  pointer-events: none;
  contain: strict;
  background: white;
}



@mixin ios-toolbar-theme($color-name, $color-base, $color-contrast) {
  .toolbar-ios-#{$color-name} {

    .toolbar-background {
      background: $color-base;
    }

    .toolbar-title-ios,
    .bar-button-clear-ios,
    .bar-button-default-ios {
      color: $color-contrast;
    }

    @each $color-name, $color-base, $color-contrast in get-colors($h5) {
      @include ios-toolbar-theme($color-name, $color-base, $color-contrast)
    }
  }
}



@each $color-name, $color-base, $color-contrast in get-colors($h5) {

  .toolbar-#{$color-name} {
    .seed-toolbar-background {
      background-color: $color-base;
    }
    .seed-toolbar-title {
      color: $color-contrast

    }
  }

}
